import '@antv/x6-react-components/es/split-box/style/index.css';

import { SplitBox } from '@antv/x6-react-components';
import styled from '@emotion/styled';
import { Button, Empty } from 'antd';
import { FC } from 'react';

import { post } from '@/api';
import storage from '@/utils/storage';

import { FlowContent } from './components/FlowContent';
import { FlowList } from './components/FlowList';
import { CategoryModifyForm } from './components/FlowList/category-modify-form';
import { FlowModifyForm } from './components/FlowList/flow-modify-form';

const EmptyFlowDiv = styled.div`
  width: 96%;
  height: 400px;
  background-color: white;
  margin: 0 auto;
  padding: 40px 0;
  display: flex;
  margin-top: 20px;
  border-radius: 8px;
  justify-content: center;
`;

export const Component: FC = () => {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const queryFlowId = searchParams.get('flowId');
  const [isNotCategory, setIsNotCategory] = useState(false);
  const [firstCategory, setFirstCategory] = useState<any>();

  useEffect(() => {
    const localFlowId = storage.get('cache-flowId');
    const showFirstFlow = () => {
      post('/group/listWithCategory').then((res) => {
        if (!res.length) {
          setIsNotCategory(true);
          return;
        }

        const anyFlow = res.find((category) => {
          return category.groups?.find((group) => {
            const flow = group.flows?.[0];
            if (flow) {
              navigate(`?flowId=${flow.id}`);
              return true;
            }
            return false;
          });
        });

        if (!anyFlow) {
          setFirstCategory(res[0]);
        }
      });
    };

    if (queryFlowId) {
      storage.set('cache-flowId', queryFlowId);
    } else {
      if (localFlowId) {
        navigate(`?flowId=${localFlowId}`);
      } else {
        showFirstFlow();
      }
    }
  }, [navigate, queryFlowId]);

  if (isNotCategory) {
    return (
      <EmptyFlowDiv className="empty-flow">
        <Empty description="暂无流程场景">
          <CategoryModifyForm
            type="add"
            refresh={(category) => {
              setIsNotCategory(false);
              setFirstCategory(category);
            }}>
            <Button type="primary">去创建</Button>
          </CategoryModifyForm>
        </Empty>
      </EmptyFlowDiv>
    );
  }

  if (firstCategory) {
    return (
      <EmptyFlowDiv className="empty-flow">
        <Empty
          description={
            <div className={'text-14 text-primary-500 shaking'}>
              暂无流程, 为“
              <span className="text-primary-700">{firstCategory?.name}</span>”创建个流程吧~
            </div>
          }>
          <FlowModifyForm
            type="add"
            params={{ categoryId: firstCategory.id }}
            refresh={({ id: newFlowId }) => {
              if (newFlowId) {
                navigate(`?flowId=${newFlowId}`);
                setFirstCategory(undefined);
              }
            }}>
            <Button type="primary">去创建</Button>
          </FlowModifyForm>
        </Empty>
      </EmptyFlowDiv>
    );
  }

  return (
    <SplitBox size={280} minSize={180} maxSize={400} split="vertical">
      <div className="h-full">
        <FlowList />
      </div>
      <div className="w-full h-full">
        <FlowContent />
      </div>
    </SplitBox>
  );
};

Component.displayName = 'Flow';
